import React, { Suspense } from 'react';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/pages/DataStatistics/AnswerRecords/index.less';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Form, Icon, Row, Tooltip, DatePicker, Col, Input, Button, Spin, Table } from 'antd';
import { connect } from 'dva';

const { RangePicker } = DatePicker;
const { Search } = Input;

class QaStatistics extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      loading: false,
      dataSource: [],
      query: {
        page: 1,
        limit: 10,
        query: '',
        from: '',
        to: '',
      },
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    const { query } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'qaStatistics/getStatCount',
      payload: query,
      callback: res => {
        console.log(res);
        this.setState({
          dataSource: res.list,
          total: res.total
        });
      },
    });
  };

  queryByCondition = () => {
    const info = this.props.form.getFieldsValue();
    let { query } = this.state;
    console.log(info);
    query.from = info.time && info.time[0] ? info.time[0].format('YYYY-MM-DD') : '';
    query.to = info.time && info.time[1] ? info.time[1].format('YYYY-MM-DD') : '';
    query.query = info.query ? info.query : '';
    query.page = 1;
    this.setState({ query }, () => {
      this.getList();
    });
  };

  exportList = () => {
    const { dispatch } = this.props;
    const { query } = this.state;
    dispatch({
      type: 'qaStatistics/exportQaStatistics',
      payload: query,
      callback: res => {
        console.log('导出', res);
      },
    });
  };
  render() {
    const { total, loading, dataSource, query } = this.state;
    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '知识点',
        dataIndex: 'qaQuestion',
        width: 'calc(30vw)',
      },
      {
        title: '知识库分类',
        dataIndex: 'categoryPath',
        width: 'calc(30vw)',
      },
      {
        title: '询问次数',
        dataIndex: 'askCount',
        width: 'calc(15vw)',
      },
      {
        title: '已采纳',
        dataIndex: 'acceptCount',
        width: 'calc(15vw)',
      },
    ];
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <div className={styles.overall}>
            <Row className={styles.colorBackground}>
              <Col style={{ padding: 10, color: '#4B5475', fontWeight: 600 }} sm={24} md={8}>
                <div className={styles.buttonAB} style={{ marginTop: 0 }}>
                  <span className={styles.AccessTrend} />
                  <span
                    style={{
                      fontSize: 16,
                      color: '#4B5475',
                      borderLeft: '5px solid #13c2f3',
                      paddingLeft: 10,
                      fontWeight: 600,
                    }}
                  >
                    问答统计
                    {`(${total})`}
                  </span>
                  <span style={{ marginLeft: 12, marginTop: 5 }}>
                    <Tooltip
                      placement="top"
                      title="1、机器人所有问答会话都在这里，可任意切换时间查看下载。2、关联：即把当前问句关联到库内某个知识点中，成为它的相似问。3、新增：即把当前问句新增为一个知识点。4、上下文：即查看该会话发生情景。5、评价：该评价指用户对机器人回复答案的评价，已解决为赞，未解决为踩。"
                      arrowPointAtCenter
                    >
                      <Icon type="info-circle" />
                    </Tooltip>
                  </span>
                </div>
              </Col>
              <Col style={{ padding: 10, textAlign: 'right' }} sm={24} md={16}>
                <Form layout="inline">
                  <Form.Item>
                    {getFieldDecorator('time')(<RangePicker style={{ width: 220 }} />)}
                  </Form.Item>
                  <Form.Item>
                    {getFieldDecorator('query')(<Search placeholder={'请输入搜索内容'} />)}
                  </Form.Item>
                  <Form.Item>
                    <Button type={'primary'} onClick={this.queryByCondition}>
                      查询
                    </Button>
                  </Form.Item>
                  <Form.Item>
                    <Button type={'primary'} onClick={this.exportList}>
                      导出
                    </Button>
                  </Form.Item>
                </Form>
              </Col>
            </Row>
          </div>
          <div
            className="tableyc"
            style={{ backgroundColor: ' #ffffff', minHeight: ' calc(100vh - 210px)' }}
          >
            <Spin spinning={loading}>
              <Table
                className="zdyTable"
                style={{ padding: '20px 20px 0px 20px' }}
                columns={columns}
                dataSource={dataSource}
                rowKey={(record, index) => index}
                pagination={{
                  total: total,
                  pageSize: 10,
                  current: query.page,
                }}
              />
            </Spin>
          </div>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(QaStatistics));
